<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Formatter - Crazy for code </title>

    <% include head%>
</head>
<body>
    <% include nav%>

    <div class="row">
        <h1>代码美化/压缩</h1>
    </div>
    <form action="/formatter" method="post" id="form">

        <div class="row">

            <label for="format-type">Format type</label>
            <select id="format-type" name="format_type">
                <optgroup label="Beautify">
                    <option value="beautyfiy_js">Beautify JavaScript</option>
                    <option value="beautyfiy_html">Beautify HTML</option>
                    <option value="beautyfiy_css">Beautify CSS</option>
                </optgroup>
                <optgroup label="Compress">
                    <option value="compress_js">Compress JavaScript</option>
                    <option value="compress_css">Compress CSS</option>
                </optgroup>
                <optgroup label="Convert">
                    <option value="encode_html">Encode html entitis</option>
                    <option value="decode_html">Decode html entitis</option>
                </optgroup>
            </select>
            <% if( typeof type !== "undefined" ) { %>
            <script>cfg.formatType = '<%= type %>';</script>
            <% } %>
        </div>
        <div class="row">
            <div class="large-3 columns">
                <input type="checkbox" name="remove_console" id="remove_console" /> 
                <label for="remove_console">Remove console</label>
                <br>
                <input type="checkbox" name="indent_with_tabs" id="indent_with_tabs" /> 
                <label for="indent_with_tabs">Indent with tabs</label>
            </div>

            <div class="large-3 columns">
                <input type="checkbox" name="ascii_only" id="ascii_only" />
                <label for="ascii_only" title="transfer non-ascii to Unicode">Ascii only</label>
            </div>

            <div class="large-6 columns">
                <label>Indent Size</label>
                <input type="radio" name="indent_size" value="1" id="indent_size_1"><label for="indent_size_1">1</label>
                <input type="radio" name="indent_size" value="2" id="indent_size_2"><label for="indent_size_2">2</label>
                <input type="radio" name="indent_size" value="3" id="indent_size_3"><label for="indent_size_3">3</label>
                <input type="radio" name="indent_size" value="4" id="indent_size_4" checked><label for="indent_size_4">4</label>
            </div>
        </div>
        <div class="row">
            <label for="code-in">Your Code </label>
            <textarea class="code" id="code-in" rows="30" name="source" placeholder="past your code here..." spellcheck="false"><% if (typeof result !== "undefined") { %><%= result %><% } %></textarea>

            <% if ( typeof error !== "undefined" ) { %>
            <div data-alert="" class="alert-box alert">
                Error: <%= error.message %>
                <a href="#" class="close">×</a>
            </div>
            <% } %>
            <ul class="button-group">
                <input type="submit" class="button" value="Format" />
                <input type="reset" class="button secondary" value="reset" id="reset" />
            </ul>
        </div>
    </form>

    <% include foot%>
    <% include ga%>
</body>
</html>
